import type { FC } from 'react'
import { useState } from 'react'
import { useAppDispatch, useAppSelector } from '@/store/hooks.ts'
import { selectCount, decrement, decrementAsync, selectLoading } from '@/store/counterSlice.ts'
import { getColorThunkCreator, selectColorLoading } from '@/store/colorSlice.ts'
import { Space, Button, Input } from 'antd'
import styles from '@/components/css/right.module.less'

const Right: FC = () => {
  const count = useAppSelector(selectCount)
  const loading = useAppSelector(selectLoading)
  const colorLoading = useAppSelector(selectColorLoading)
  const dispatch = useAppDispatch()
  const [num, setNum] = useState(1)

  return (
    <div className={styles.boxRight}>
      <h3>count 的值是：{count}</h3>

      <hr className={styles.sep} />

      {/* 按钮区域 */}
      <Space>
        <Button type="primary" onClick={() => dispatch(decrement())}>
          -1
        </Button>

        {/* 文本框和按钮 */}
        <Input value={num} onChange={(e) => setNum(Number(e.currentTarget.value))} />
        <Button type="primary" onClick={() => dispatch(decrement(num))}>
          sub
        </Button>

        <Button type="primary" loading={loading} onClick={() => dispatch(decrementAsync())}>
          1秒后-1
        </Button>
      </Space>

      <hr className={styles.sep} />

      <Button type="primary" loading={colorLoading} onClick={() => dispatch(getColorThunkCreator())}>
        请求随机的颜色值
      </Button>
    </div>
  )
}

export default Right
